<template>
  <div class="widget-item-container">
    <a-row :key="element.key" class="widget-view" :gutter="element.options.gutter ?? 0" :align="element.options.align">
      <a-col :span="element.options.columns[0].gridLayoutNumber">
        <p class="label-text" :class="{ 'label-text-required': element.options.rules.required }">
          {{ element.options.columns[0].name }}
        </p>
        <template v-if="disabled">
          {{ valueData.packageSpecName }}
        </template>
        <template v-else>
          <packageCom
            v-model:packageString="valueData.packageSpecName"
            v-model:packageList="valueData.packageSpec"
            @change="packageChange"
          ></packageCom>
        </template>
      </a-col>
      <a-col :span="element.options.columns[1].gridLayoutNumber">
        <p class="label-text" :class="{ 'label-text-required': element.options.rules.required }">
          {{ element.options.columns[1].name }}
        </p>
        <template v-if="disabled">
          {{ valueData.minSpecName }}
        </template>
        <template v-else>
          <a-select
            v-model:value="unit"
            :options="valueData.packageSpec"
            :size="config.size"
            :label-in-value="true"
            :field-names="fieldNames"
            style="width: 100%"
            @change="change"
          ></a-select>
        </template>
      </a-col>
    </a-row>
  </div>
</template>
<script setup lang="ts">
import { ref, toRefs, computed } from 'vue'
import { WidgetForm } from '../config/antd'
import packageCom from './package.vue'
import { Form } from 'ant-design-vue'

const formItemContext = Form.useInjectFormItemContext()

const emits = defineEmits(['delete', 'update:modelValue', 'change'])
const props = defineProps<{
  modelValue: any
  config: WidgetForm['config']
  element: any
  disabled: boolean
}>()

const { config, element, disabled } = toRefs(props)

const unit = ref({ label: props.modelValue?.minSpecName, value: props.modelValue?.minSpecId })

const valueData: any = computed({
  get() {
    return props.modelValue || {}
  },
  set(value) {
    emits('update:modelValue', value)
    formItemContext.onFieldChange()
    emits('change', value)
  }
})

const fieldNames = { label: 'specName', value: 'specId' }

const packageChange = (val) => {
  valueData.value = val
  unit.value = { label: undefined, value: undefined }
}

const change = (val) => {
  valueData.value.minSpecId = val.value
  valueData.value.minSpecName = val.label
  emits('change', valueData.value)
  emits('update:modelValue', valueData.value)
  formItemContext.onFieldChange()
}
</script>
<style lang="less" scoped>
// @import url('@@/styles/var.less');
.label-text {
  color: @text-color-third;
  margin-bottom: 0;
  padding: 0 0 8px;
  line-height: 1.5715;
  white-space: initial;
  text-align: left;
}
.label-text-required::before {
  display: inline-block;
  margin-right: 4px;
  color: #ff4d4f;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
</style>
